import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList, AtListItem, AtInput, AtButton, AtToast} from 'taro-ui'
import './editPatientInfo.scss'
import reactMixin  from 'react-mixin'
import myJs from './editPatientInfoJs.js'

export default class EditPatientInfo extends Component {
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    config = {
        navigationBarTitleText: '修改患者信息'
    }

    init() {
        this.setState({
            genderRang: ['男', '女'],
            genderChecked: '',
            cityDel:'请选择居住城市',
            marryRang: ["未婚", "已婚", "离婚", "丧偶"],
            message: '',
            isOpened: false
        });
        this.state.case_detail.id = this.$router.params.id;
        this.setState({
            case_detail: this.state.case_detail
        });
    }

    onPickerChange(name, data, event) {
        var names = name.split('.');
        var n = names[0];
        var temp = this.state;
        for(var i = 0; i < names.length - 1; i++) {
            temp = temp[names[i]];
        }

        if(names.length > 1) {
            temp[names[i]] = data[event.detail.value];
            this.setState({n: temp});
        } else {
            this.setState({n: data[event.detail.value]});
        }
    }

    onCityChange = e => {
        let case_detail = this.state.case_detail;
        case_detail.province = e.detail.value[0];
        case_detail.city = e.detail.value[1];
        this.setState({
            case_detail: case_detail
        })
    }


    showToast(text) {
        this.setState({
            message: text,
            isOpened: true
        });
    }

    toastClose() {
        this.setState({
            isOpened: false
        });
    }

    render () {
        console.log("渲染后",this.state.case_detail)
        return (
            <View className='editPatientInfo'>
                <AtToast onClose={this.toastClose} hasMask={true} isOpened={this.state.isOpened} text={this.state.message} icon="alert-circle"></AtToast>
                {/* <AtList>
                    <AtListItem title='快速中已有患者中选择' arrow='right' hasBorder={false} className="class1"/>
                    <AtListItem title='手动填写' className="class3"/>
                </AtList> */}
                <AtInput value={this.state.case_detail.patient_name} onChange={this.handleChange.bind(this, 'case_detail.patient_name')} title='姓名(必填)' type='text' placeholder='请输入真实姓名' className="class4"/>
                <View className="class2">
                    <Text>性别</Text>
                    <Picker mode='selector' range={this.state.genderRang} onChange={this.onPickerChange.bind(this, 'case_detail.gender', this.state.genderRang)}>
                        <View className='picker'>
                        {
                            this.state.case_detail.gender ? 
                            <Text>{this.state.case_detail.gender}</Text>: 
                            <Text className="placeholderClass">请选择性别</Text>
                        }
                        </View>
                    </Picker>
                </View>
                <View className="class2">
                    <Text>出生日期</Text>
                    <Picker mode='date' onChange={this.handleDetailChange.bind(this, 'case_detail.birthday')}>
                        <View className='picker'>
                        {
                            this.state.case_detail.birthday ? 
                            <Text>{this.state.case_detail.birthday}</Text>: 
                            <Text className="placeholderClass">请选择出生日期</Text>
                        }
                        </View>
                    </Picker>
                </View>
                <AtInput error={false} value={this.state.case_detail.phone} onChange={this.handleChange.bind(this, 'case_detail.phone')} title='手机号' type='phone' placeholder='请输入手机号码' className="class4"/>
                <View className="class2">
                    <Text>居住城市</Text>
                    <Picker mode='region' onChange={this.onCityChange}>
                        <View className='picker'>                
                            <Text className="placeholderClass">{this.state.case_detail.province && this.state.case_detail.city ? (this.state.case_detail.province + this.state.case_detail.city) : '请选择居住城市'}</Text>                  
                        </View>
                    </Picker>
                </View>
                <View className="class2">
                    <Text>婚姻状态</Text>
                    <Picker mode='selector' range={this.state.marryRang} onChange={this.onPickerChange.bind(this, 'case_detail.marry_status', this.state.marryRang)}>
                        {
                            this.state.case_detail.marry_status ? 
                            <Text>{this.state.case_detail.marry_status}</Text>: 
                            <Text className="placeholderClass">请选择婚姻状态</Text>
                        }
                    </Picker>
                </View>
                <AtInput value={this.state.case_detail.occupation} onChange={this.handleChange.bind(this, 'case_detail.occupation')} title='职业' type='text' placeholder='请输入患者职业' className="class4"/>
                <AtButton type='primary' size='normal' full={true} className="class5" onClick={this.updateCase_detail.bind(this)}>保存</AtButton>
            </View>
        );
    }
}

reactMixin.onClass(EditPatientInfo, myJs);
